@charset "utf-8";


*{
    margin: 0;
    padding: 0;
}

html{
    height: 100%;
    body{
        height: 100%;
    }
}

#web{
    width: 100%;
    height: 100%;
    overflow: hidden;
    #t_one{
        width: 100%;
        height: 100%;
        position: relative;
        .te{
            width: 100%;
            height: 100%;
            background: url(../img/one-g.png);
            position: absolute;
            z-index: 120;
        }
        .one-a{
            width: 100%;
            font-size: 0;
            img{
                width: 85%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin:0 auto;
                margin-top: -230%;
                z-index: 123;
                animation: one-a 0.5s linear 1 forwards  0.2s;
            }
        }
        .one-b{
            width: 100%;
            img{
                width: 81%;
                position: absolute;
                top: 0;
                left: 20%;
                right: 0;
                margin:0 auto;
                margin-top: 123%;
                z-index: 121;
                animation: one-b 0.5s linear 0.5s forwards 1;
            }
        }
        .one-c{
            width: 100%;
            img{
                width: 20%;
                position: absolute;
                top: 0;
                left: -21%;
                right: 0;
                margin: auto;
                margin-top: 134%;
                transform: scale(1);
                opacity: 0;
                z-index: 122;
                animation: one-c 0.5s linear 0.5s forwards 1;
            }
        }
        .one-d{
            width: 100%;
            img{
                width:33%;
                position: absolute;
                top: 0;
                left: -15%;
                right: 0;
                margin: auto;
                margin-top: 20%;
                opacity: 0;
                z-index: 123;
                animation: one-d 0.1s linear 0.8s forwards 1;
            }
        }
        .one-f{
            width: 100%;
            img{
                width: 16%;
                position: absolute;
                top:0;
                right: 0;
                left: 75%;
                margin: auto;
                margin-top:161% ;
                z-index: 122;
            }
        }
        #progressText{
            color: white;
            font-size: 30px;
            position: absolute;
            z-index: 125;
        }
    }
}
// 第一页动画
@keyframes one-a{
    0%{
        margin-top: -230%;
    }
    25%{
        margin-top: 40%;
    }
    50%{
        margin-top: 20%;
    }
    75%{
        margin-top: 35%;
    }
    100%{
        margin-top: 30%;
    }
}
@keyframes one-b{
    0%{
        margin-top: 123%;
    }
    25%{
        margin-top: 132%;
    }
    50%{
        margin-top: 123%;
    }
    75%{
        margin-top: 124%;
    }
    100%{
        margin-top: 123%;
    }
}
@keyframes one-c{
    0%{
       opacity: 0;
       transform: scale(1);
    }
    25%{
        opacity: 1;
       transform: scale(0.9);
    }
    50%{
        opacity: 1;
       transform: scale(1.1);
    }
    75%{
        opacity: 1;
       transform: scale(0.95);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes one-d{
    from{
        opacity: 0;
        margin-top: 100%;
    }
    to{
        opacity: 1;
        margin-top: 147%;
    }
}



// 第二页
#web{
    height: 100%;
    position: relative;
    overflow: hidden;
    #t_two{
        width: 100%;
        height: 600px;
        position: absolute;
        .two-a{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 100;
                transform: rotate(0deg) scale(3);
                opacity: 0;
                animation: two-a 6s linear infinite 2.5s;
            }
        }
        .two-b{
            width: 100%;
            img{
                width: 28%;
                position: absolute;
                top: 0;
                right: 0;
                left: 64%;
                margin: auto;
                margin-top: 3%;
                z-index: 101; 
            }
        }
        .two-c{
            width: 100%;
            img{
                width: 80%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0px;
                margin: auto;
                margin-top: 44%;
                z-index: 101;
                animation: two-c 1s linear infinite;
            }
        }
        .two-d{
            width: 100%;
            img{
                width: 20%;
                position: absolute;
                top: 0;
                right: 0;
                left: 8%;
                margin: auto;
                margin-top: 64%;
                z-index: 101; 
            }
        }
        .two-e{
            width: 100%;
            img{
                width: 78%;
                position: absolute;
                top: 0;
                right: 0px;
                left: 0;
                margin: auto;
                margin-top: 15%;
                z-index: 103; 
            }
        }
        .two-f{
            width: 100%;
            img{
                width: 37%;
                position: absolute;
                top: 0;
                right: 0px;
                left: -31%;
                margin: auto;
                margin-top: 84%;
                z-index: 103; 
            }
        }
        .two-g{
            width: 100%;
            img{
                width: 38%;
                position: absolute;
                top: 0;
                right: 0px;
                left: 48%;
                margin: auto;
                margin-top: 86%;
                z-index: 103; 
            }
        }
        .two-h{
            width: 100%;
            img{
                width: 30%;
                position: absolute;
                top: 0;
                right: 0px;
                left: -48%;
                margin: auto;
                margin-top: 82%;
                z-index: 102; 
                transform: rotate(0deg);
                animation: two-h 1s linear infinite;
            }
        }
        .two-i{
            width: 100%;
            img{
                width: 7%;
                position: absolute;
                top: 0;
                right: 0px;
                left: 83%;
                margin: auto;
                margin-top: 90%;
                z-index: 102; 
                transform-origin: left bottom;
                transform: rotate(0deg);
                animation: two-i 0.5s linear infinite;
            }
        }
        .two-j{
            width: 100%;
            img{
                width: 7%;
                position: absolute;
                top: 0;
                right: 0px;
                left: 24%;
                margin: auto;
                margin-top: 93%;
                z-index: 102; 
                transform-origin: left bottom;
                transform: rotate(-30deg);
                animation: two-j 0.5s linear infinite;
            }
        }
        .two-k{
            width: 100%;
            img{
                width:46%;
                position: absolute;
                top: 0;
                right: 0px;
                left: 0px;
                margin: auto;
                margin-top: 124%;
                z-index: 103; 
                transform: rotate(0deg) scale(1);
                animation: two-k 1.2s linear infinite;
            }
        }
    }
}









// 动画设置
@keyframes two-a{
    from{
        opacity: 1;
        transform: rotate(0deg) scale(3);
    }
    to{
        opacity: 1;
       transform: rotate(360deg) scale(3); 
    }
}
@keyframes two-c{
    0%{
        transform:scale(1);
    }
    35%{
        transform: scale(0.95); 
    }
    70%{
        transform: scale(1.05); 
    }
    100%{
        transform: scale(1); 
    }
}
@keyframes two-h{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(5deg); 
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes two-i{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(5deg); 
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes two-j{
    0%{
        transform: rotate(-30deg);
    }
    25%{
        transform: rotate(-35deg); 
    }
    50%{
        transform: rotate(-30deg);
    }
    75%{
        transform: rotate(-25deg);
    }
    100%{
        transform: rotate(-30deg);
    }
}
@keyframes two-k{
    0%{
        transform: rotate(0deg) scale(1);
    }
    10%{
        transform: rotate(0deg) scale(0.8);
    }
    20%{
        transform: rotate(0deg) scale(1.1);
    }
    30%{
        transform: rotate(10deg) scale(1.1);
    }
    40%{
        transform: rotate(-10deg) scale(1.1);
    }
    50%{
        transform: rotate(10deg) scale(1.1);
    }
    60%{
        transform: rotate(-10deg) scale(1.1);
    }
    70%{
        transform: rotate(0deg) scale(1.1);
    }
    80%{
        transform: rotate(0deg) scale(0.9);
    }
    90%{
        transform: rotate(0deg) scale(1.06);
    }
    100%{
        transform: rotate(0deg) scale(1);
    }
}